<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Refresh, Loading} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  adminGetUserList,
  adminBlockUser,
  adminFreezeUser,
  adminDeleteUser,
  adminUnfreezeUser,
  adminUnblockUser
} from "@/router/api"

const tableData = ref<Array<{
  id: string;
  account: string;
  email: string;
  telphone: string;
  status: string;
  points: number;
  money: number;
}>>([]);
const status = [// 借阅状态
  {text: '正常', value: '正常'},
  {text: '已冻结', value: '已冻结'},
  {text: '已拉黑', value: '已拉黑'},
];
// 表格行样式
const tableRowClassName = ({row}: { row: any }) =>
    row.status === '正常' ? 'success-row' : row.status === '已冻结' ? 'warning-row' : '';
const filterStatus = (value: string, row: any) => {// 状态标签筛选函数
  return row.status === value;
};
const loading = ref(false)
const isRefreshing = ref(false);
const mapData = (data: Array<any>) => {
  return data.map((item) => ({
    id: item.id,
    account: item.account,
    email: item.email,
    telphone: item.telphone,
    status: item.status === '1' ? '正常' : item.status === '0' ? '已冻结' : '已拉黑',
    points: item.points,
    money: item.money
  }));
};
// 获取用户列表
const getUserLists = async () => {
  try {
    const response = await adminGetUserList();
    if (Array.isArray(response)) {
      tableData.value = mapData(response);
    }
  } catch (error) {
    showMessage('error', "获取用户列表失败")
  }
}
// 模拟刷新动画
const handleRefresh = () => {
  getUserLists()
  isRefreshing.value = true;
  loading.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
    loading.value = false;
  }, 1000);
};
const showMessage = (type: any, message: any) => {// 显示消息提示
  ElMessage({
    type,
    message,
    duration: 1000,
  });
};
// 拉黑
const handBlocking = async (row: any) => {
  try {
    if (row.status === '正常') {
      // 如果当前状态正常，执行拉黑操作
      await adminBlockUser(row.id);
      showMessage('success', "拉黑成功");
    } else if (row.status === '已拉黑') {
      // 如果当前状态已拉黑，执行解除拉黑操作
      await adminUnblockUser(row.id);
      showMessage('success', "解除拉黑成功");
    }
    await getUserLists()
  } catch (error) {
    showMessage('error', "拉黑失败")
  }
}
// 冻结
const handFreeze = async (row: any) => {
  try {
    if (row.status === '正常') {
      // 如果当前状态正常，执行冻结操作
      await adminFreezeUser(row.id);
      showMessage('success', "冻结成功");
    } else if (row.status === '已冻结') {
      // 如果当前状态已冻结，执行解冻操作
      await adminUnfreezeUser(row.id);
      showMessage('success', "解冻成功");
    }
    await getUserLists()
  } catch (error) {
    showMessage('error', "冻结失败")
  }
}
// 删除操作
const handleDelete = (row: any) => {
  ElMessageBox({
    title: '删除用户',
    message: '你确定要删除该用户？',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    center: true,  // 中心对齐
  }).then(async () => {
    await adminDeleteUser(row.id)
    await getUserLists()
    showMessage('success', "删除成功")
  })
      .catch(() => {
        showMessage('info', "已取消删除");
      });
};
onMounted(() => {
  getUserLists()
})
</script>

<template>
  <div class="refresh-container">
    <el-icon v-if="isRefreshing" class="loading-icon">
      <Loading/>
    </el-icon>
    <el-icon v-else class="refresh-icon">
      <Refresh @click="handleRefresh"/>
    </el-icon>
  </div>
  <el-table :data="tableData" border style="width: 100%" highlight-current-row v-loading="loading"
            :row-class-name="tableRowClassName">
    <el-table-column prop="account" label="账号" show-overflow-tooltip align="center"/>
    <el-table-column prop="status" label="状态" :filters="status" :filter-method="filterStatus"
                     filter-placement="bottom-end" show-overflow-tooltip align="center" width="90">
      <template #default="scope">
        <el-tag
            :type="scope.row.status === '正常' ? 'success' : scope.row.status === '已冻结' ? 'warning' : 'info'"
            disable-transitions>
          {{ scope.row.status }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="email" label="邮箱" show-overflow-tooltip align="center"/>
    <el-table-column prop="telphone" label="电话" show-overflow-tooltip align="center"/>
    <el-table-column prop="points" label="积分" show-overflow-tooltip align="center" width="90"/>
    <el-table-column prop="money" label="金额" show-overflow-tooltip align="center" width="100"/>
    <el-table-column fixed="right" label="操作" show-overflow-tooltip align="center" width="200">
      <template #default="scope">
        <el-button size="small" @click="handBlocking(scope.row)" type="info" plain
                   :disabled="scope.row.status === '已冻结'">
          {{ scope.row.status === '正常' || scope.row.status === '已冻结' ? '拉黑' : '解除' }}
        </el-button>
        <el-button size="small" @click="handFreeze(scope.row)" type="warning" plain
                   :disabled="scope.row.status === '已拉黑'">
          {{ scope.row.status === '正常' || scope.row.status === '已拉黑' ? '冻结' : '解冻' }}
        </el-button>
        <el-button size="small" @click="handleDelete(scope.row)" type="danger" plain>
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
.refresh-container {
  margin-top: 4px;
  margin-left: 20px;
}

.loading-icon {
  color: #707581;
  font-size: 26px;
  animation: spin 1s infinite linear;
}

.refresh-icon {
  color: #707581;
  cursor: pointer;
  font-size: 26px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
